<ul class="cd-steps cd-steps-3">
  <li class="cd-steps-item {% if stepOne|default(false) and not stepTwo|default(false) and not stepThree|default(false) %} doing {% else %} done hidden-xs{% endif %}">
    <div class="cd-steps-tail"><i></i></div>
    <div class="cd-steps-step">
      <div class="step-wrap">
        {% if stepOne|default(false) and not stepTwo|default(false) and not stepThree|default(false) %}
          <div class="step-number">1</div>
        {% else %}
          <div class="step-number step-icon"><i class="cd-icon cd-icon-check"></i></div>
        {% endif %}
      </div>
      <div class="step-wrap">
        <span class="step-info">{{ 'user.settings.security.pay_password_find.way'|trans }}</span>
      </div>
    </div>
  </li>
  <li class="cd-steps-item {% if stepTwo|default(false) and not stepThree|default(false) %} doing {% elseif stepThree|default(false) %} done hidden-xs {% else %}hidden-xs{% endif %} ">
    <div class="cd-steps-tail"><i></i></div>
    <div class="cd-steps-step">
      <div class="step-wrap">
        {% if stepThree|default(false) %}
          <div class="step-number step-icon"><i class="cd-icon cd-icon-check"></i></div>
        {% else %}
          <div class="step-number">2</div>
        {% endif %}
      </div>
      <div class="step-wrap">
        <span class="step-info">{{ 'user.settings.security.pay_password.validate_info'|trans }}</span>
      </div>
    </div>
  </li>
  <li class="cd-steps-item {% if stepThree|default(false) %} doing {% else %} hidden-xs {% endif %} ">
    <div class="cd-steps-tail"><i></i></div>
    <div class="cd-steps-step">
      <div class="step-wrap">
        <div class="step-number">3</div>
      </div>
      <div class="step-wrap">
        <span class="step-info">{{ 'user.settings.security.password_reset'|trans }}</span>
      </div>
    </div>
  </li>
</ul>